
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-order"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-order</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chongzhi"></i>
                    <div class="name">充值</div>
                    <div class="fontclass">.icon-chongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangsanjiao"></i>
                    <div class="name">上三角</div>
                    <div class="fontclass">.icon-shangsanjiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shequ"></i>
                    <div class="name">社区</div>
                    <div class="fontclass">.icon-shequ</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cart"></i>
                    <div class="name">cart</div>
                    <div class="fontclass">.icon-cart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renwu"></i>
                    <div class="name">任务</div>
                    <div class="fontclass">.icon-renwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-czlog"></i>
                    <div class="name">账户充值</div>
                    <div class="fontclass">.icon-czlog</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconshangpinfenlei"></i>
                    <div class="name">icon_商品分类</div>
                    <div class="fontclass">.icon-iconshangpinfenlei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-product"></i>
                    <div class="name">产品</div>
                    <div class="fontclass">.icon-product</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-you"></i>
                    <div class="name">右</div>
                    <div class="fontclass">.icon-you</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuo"></i>
                    <div class="name">左</div>
                    <div class="fontclass">.icon-zuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chujiajingpai"></i>
                    <div class="name">出价竞拍</div>
                    <div class="fontclass">.icon-chujiajingpai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-menu"></i>
                    <div class="name">menu</div>
                    <div class="fontclass">.icon-menu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-minus"></i>
                    <div class="name">minus</div>
                    <div class="fontclass">.icon-minus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-plus"></i>
                    <div class="name">plus</div>
                    <div class="fontclass">.icon-plus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unfold"></i>
                    <div class="name">unfold</div>
                    <div class="fontclass">.icon-unfold</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gotop"></i>
                    <div class="name">top</div>
                    <div class="fontclass">.icon-gotop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">home</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-comment"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.icon-comment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guest"></i>
                    <div class="name">留言板</div>
                    <div class="fontclass">.icon-guest</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yonghu"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-yonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quanbu"></i>
                    <div class="name">全部</div>
                    <div class="fontclass">.icon-quanbu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fold"></i>
                    <div class="name">fold</div>
                    <div class="fontclass">.icon-fold</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shdz"></i>
                    <div class="name">轻松收货</div>
                    <div class="fontclass">.icon-shdz</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-article"></i>
                    <div class="name">文章</div>
                    <div class="fontclass">.icon-article</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paihang"></i>
                    <div class="name">主题排行</div>
                    <div class="fontclass">.icon-paihang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-remenchanpin"></i>
                    <div class="name">热门产品</div>
                    <div class="fontclass">.icon-remenchanpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-about"></i>
                    <div class="name">关于</div>
                    <div class="fontclass">.icon-about</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user"></i>
                    <div class="name">user</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-product1"></i>
                    <div class="name">product</div>
                    <div class="fontclass">.icon-product1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-riji"></i>
                    <div class="name">育心日记本</div>
                    <div class="fontclass">.icon-riji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home-sx"></i>
                    <div class="name">11 home</div>
                    <div class="fontclass">.icon-home-sx</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-upload"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-upload</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phoner"></i>
                    <div class="name">phone</div>
                    <div class="fontclass">.icon-phoner</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-back"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-back</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paizhao"></i>
                    <div class="name">拍照</div>
                    <div class="fontclass">.icon-paizhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shop"></i>
                    <div class="name">我的店铺</div>
                    <div class="fontclass">.icon-shop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search1"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-logout"></i>
                    <div class="name">注销</div>
                    <div class="fontclass">.icon-logout</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guangjie"></i>
                    <div class="name">逛街</div>
                    <div class="fontclass">.icon-guangjie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-szlog"></i>
                    <div class="name">收支明细</div>
                    <div class="fontclass">.icon-szlog</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-telephone"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-telephone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiepinglun"></i>
                    <div class="name">写评论</div>
                    <div class="fontclass">.icon-xiepinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shou"></i>
                    <div class="name">手</div>
                    <div class="fontclass">.icon-shou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liebiao"></i>
                    <div class="name">菜单</div>
                    <div class="fontclass">.icon-liebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bell-kx"></i>
                    <div class="name">消息D</div>
                    <div class="fontclass">.icon-bell-kx</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bell"></i>
                    <div class="name">消息提醒</div>
                    <div class="fontclass">.icon-bell</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-write"></i>
                    <div class="name">icon_Write</div>
                    <div class="fontclass">.icon-write</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yudi"></i>
                    <div class="name">雨滴3</div>
                    <div class="fontclass">.icon-yudi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-desc"></i>
                    <div class="name">enclosure</div>
                    <div class="fontclass">.icon-desc</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map"></i>
                    <div class="name">map</div>
                    <div class="fontclass">.icon-map</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-love"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.icon-love</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhangdan"></i>
                    <div class="name">账单付费</div>
                    <div class="fontclass">.icon-zhangdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user-kx"></i>
                    <div class="name">user</div>
                    <div class="fontclass">.icon-user-kx</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dhdd"></i>
                    <div class="name">兑换订单</div>
                    <div class="fontclass">.icon-dhdd</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shopadmin"></i>
                    <div class="name">商家名称</div>
                    <div class="fontclass">.icon-shopadmin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pwd"></i>
                    <div class="name">修改密码</div>
                    <div class="fontclass">.icon-pwd</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-waimai"></i>
                    <div class="name">外卖</div>
                    <div class="fontclass">.icon-waimai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-job"></i>
                    <div class="name">兼职招聘</div>
                    <div class="fontclass">.icon-job</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianmin"></i>
                    <div class="name">便民工具</div>
                    <div class="fontclass">.icon-bianmin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-peisong"></i>
                    <div class="name">国内配送</div>
                    <div class="fontclass">.icon-peisong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingxing"></i>
                    <div class="name">星星</div>
                    <div class="fontclass">.icon-xingxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wx-tan"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.icon-wx-tan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-more"></i>
                    <div class="name">更多信息</div>
                    <div class="fontclass">.icon-more</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-time"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-time</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wx-comment"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.icon-wx-comment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiasanjiao"></i>
                    <div class="name">下拉三角</div>
                    <div class="fontclass">.icon-xiasanjiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiangbei"></i>
                    <div class="name">奖杯</div>
                    <div class="fontclass">.icon-jiangbei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat"></i>
                    <div class="name">icon_约跳聊天</div>
                    <div class="fontclass">.icon-chat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianmin1"></i>
                    <div class="name">便民</div>
                    <div class="fontclass">.icon-bianmin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hottopic"></i>
                    <div class="name">热门主题</div>
                    <div class="fontclass">.icon-hottopic</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bao"></i>
                    <div class="name">包</div>
                    <div class="fontclass">.icon-bao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-save"></i>
                    <div class="name">保存</div>
                    <div class="fontclass">.icon-save</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
